<template>
    <div class="runDataTop flex">
        <div class="runDataTop_l flex-c pinter" @click="leftClick">
            <!-- <a-icon type="fast-backward" /> -->
            <div class="wh32 bg-C0C4CC br-50 flex-c">
                <img src="../assets/images/deviceMonitor/left.png" alt="" srcset="">
            </div>
        </div>
        <div class="runDataTop_c flex-1 fs-14 hiddenClass" :id='eleId'>
            <div  class="flex classifys flex-ac"  >
                <div
                    class=" br-4 hiddenClass mr-12 classifys-item"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    <slot :index="index" :item="item"></slot>
                </div>
            </div>
        </div>
        <div class="runDataTop_r flex-c pinter" @click="rightClick">
            <!-- <a-icon type="right" /> -->
            <div class="wh32 bg-C0C4CC br-50 flex-c">
                <img src="../assets/images/deviceMonitor/right.png" alt="" srcset="">
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data () {
        return {
            showRightIcon: true, // 是否显示右箭头
            maxClickNum: 0, // 最大点击次数
            lastLeft: 0, // 上次滑动距离
            clickNum: 0, // 点击次数
            eleId:'',
        }
    },
    props:{
        list:{
            // 需要展示的数据源,在外部可以通过 <slot slot-scope="{index,item}"></slot>   拿到下标跟内容
            type:Array,
            default(){
                return []
            },
        }
    },
    methods: {
        randomId(){
            // 设置随机数id
            let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
            let len = t.length
            let id = ''
            for (let i = 0; i < 32; i++) {
            id += t.charAt(Math.floor(Math.random() * len))
            }
            this.eleId = id
        },
        // 点击右箭头（左侧滚动）
        rightClick() {
            // 如果点击次数小于数组长度-1时，执行左滑动效果。
            if (true) {
                // if (this.clickNum < this.classify.length - 1) {
                // 获取当前元素宽度
                // let width = document.querySelectorAll(".classifys-item")[this.clickNum]
                //   .offsetWidth;
                // 获取最后一个元素距离左侧的距离
                // let lastItemOffsetLeft = document.getElementsByClassName(
                //   "classifys-item"
                // )[this.classify.length - 1].offsetLeft;
                // 获取可视区域宽度
                const lookWidth = document.getElementById(this.eleId).clientWidth;
                // const lookWidth = document.getElementById("classifyScroll").clientWidth;
                // console.log(lastItemOffsetLeft,lookWidth,document.getElementsByClassName(
                //   "classifys-item"
                // ),);
                // console.dir(document.getElementsByClassName("classifys"))
                let  classifysBox = document.querySelectorAll(
                    `#${this.eleId} .classifys`
                )[0]
                // 还有 判断 最后一个元素的长度 没有完全展示完 最后一个的长度 还比较长
                // 因为 存在 一个块 比较长的情况 固不以 每个块 为单位 滚动 而是 每次滚 半个外层盒子 的长度
                // 判断条件 是 当 上一次的lastLeft-lookWidth  >=  classifys.width  的 宽度的时候 不再滚动
                // 如果最后一个元素距离左侧的距离大于可视区域的宽度，表示最后一个元素没有出现，执行滚动效果

                // console.log(this.lastLeft-lookWidth,-classifysBox.clientWidth);
                if (this.lastLeft-lookWidth > -classifysBox.clientWidth) {
                    // if (lastItemOffsetLeft > lookWidth) {
                    // 公示：滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
                    classifysBox.style.marginLeft = `${-lookWidth/2 + this.lastLeft}px`;
                    // )[0].style.marginLeft = `${-width + this.lastLeft}px`;
                    this.lastLeft = -lookWidth/2 + this.lastLeft;
                    // this.lastLeft = -width + this.lastLeft;
                    // 点击次数+1
                    this.clickNum += 1;
                    // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
                    this.maxClickNum = this.clickNum;
                }
                /*
                  如果最后一个元素距离左侧的距离大于可视距离+自身的宽度，说明没有到最后一个, 显示右侧箭头，否则隐藏右侧箭头
                  注意：这里要加上其自身的宽度，否则要多点击一下才会隐藏。因为点击的时候实际上最后一个元素还没有滚动，
                  它距离左侧的距离是大于可视区域的（也就是说获取的是上一次点击之后，距离左侧的距离）
                  所以这里要加上其自身的宽度
                */
                // this.showRightIcon = lastItemOffsetLeft > lookWidth + width;
            }
        },
        // 点击左箭头（右侧滚动）
        leftClick() {
            // console.log(this.lastLeft,this.clickNum , 'lastLeft')
            // console.log(document.querySelectorAll('.classifys-item')[this.clickNum - 1].offsetWidth, '上一个的宽度')
            // 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头
            if (this.clickNum > 0) {
                // 获取当前元素宽度
                // let width = document.querySelectorAll(".classifys-item")[
                //   this.clickNum - 1
                // ].offsetWidth;
                // console.log(width,'widthwidth');

                // 获取可视区域宽度
                const lookWidth = document.getElementById(this.eleId).clientWidth;
                // 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离
                 document.querySelectorAll(
                    `#${this.eleId} .classifys`
                )[0].style.marginLeft = `${this.lastLeft + lookWidth/2 }px`;
                this.lastLeft = lookWidth/2  + this.lastLeft;
                // 点击次数-1
                this.clickNum--;
                // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
                if (this.clickNum < this.maxClickNum) {
                    this.showRightIcon = true;
                }
            }
        },
    },
    beforeMount(){
        this.randomId()
    },
};
</script>
<style lang="less" scoped>
.runDataTop {
    .wh32{
        width: 32px;
        height: 32px;
    }
    //height: 118px;
    height: 100%;
    display: flex;
    .runDataTop_l,
    .runDataTop_r {
        width: 56px;
        height: 100%;
    }
    .runDataTop_c {
        position: relative;
    }
    .writing-mode-tb {
        writing-mode: vertical-lr;
        padding: 14px 8px;
        line-height: 1;
    }
    .h100 {
        height: 100%;
    }

}

.classifys{
    transition: all 0.3s;
}

</style>
